<template>
  <el-row>
    <home-banner/>
    <div class="homepage">
      <div class="homepage-about">
        <div class="homepage-about_left">
          <h2 class="homepage-about_red">
            关于我们
          </h2>
        </div>
        <div class="homepage-about_right">
          <button class="homepage-about_button">
            <router-link class="homepage-about_a" to="/aboutUs">更多<span>></span></router-link>
          </button>
        </div>
      </div>
      <div class="homepage-img">
        <div class="grid-content bg-purple">
          <div class="homepage-img_video">
            <!-- <img src="https://www.huashine.net/images/7ef87543fd3951b4.jpg" alt=""> -->
            <img src='../assets/hone/aboutUs.jpg' alt="">
          </div>
        </div>
        <div class="grid-content bg-porple-light">
          <div class="homepage-img_picture">
            <div class="homepage-img_p">
              <div>
                哈工科讯（沈阳）物流装备有限公司，按照集团及控股股东中安星瑞航空科技有限公司整体战略发展要求，于
                2022年完成股改，团队具有近10年从事智慧物流相关业务的行业经验，作为专业的智慧物流系统解决方案提供商，
                专注于工业物流搬运及存储领域，团队以国际先进的物流理念、前沿的技术为导向，致力于成为一家及设计规划、
                工程管理、软件开发、项目维保为一体的工业物流科技公司。团队成立以来，业绩斐然，为众多客户提供实现物料
                出入库、存储、搬运、配送等管理过程的自动化、信息化和智能一体化布局。
              </div>
            </div>
            <div class="homepage-img_foto">
              <div class="img_foto">
                <div class="im_foto-border">
                  <router-link to="/aboutUs?3" class="box animate__animated">研发</router-link>
                  <router-link to="/productcenter" class="box1 animate__animated">产品</router-link>
                  <router-link to="/engineering" class="box2 animate__animated">案例</router-link>
                  <router-link to="/contactUs" class="box3 animate__animated">服务</router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Homeproduct/>
    <!-- <Homesolution/> -->
    <Engineeringcases/>
    <Homenews/>
  </el-row>
</template>

<script>

    import HomeBanner from "../components/HomeBanner";
    import Homeproduct from '../views/Homeproduct'
    // import Homesolution from './Homesolution.vue';
    import Engineeringcases from './Engineeringcases.vue';
    import Homenews from './Homenews.vue'
    export default {
        components: {
            HomeBanner,Homeproduct,
            Engineeringcases,Homenews,
        },
        data() {
            return {
                type:''
            }
        },
        name: "Home",
    }
</script>

<style scoped>
  /* 关于我们 */
  .homepage{
    width: 80%;
    height: 100%;
    margin: 0 auto;
  }
  .homepage-about{
    display: flex;
    justify-content: space-between;
  }
  .homepage-about_left{
    width: 150px;
    height: 50px;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
    /* line-height:50px; */
  }
  .homepage-about_red::before {
    content: '';
    /* display: inline-block; */
    width: 4px;
    height: 24px;
    background-color: rgb(64, 158, 255);
    float: left;
    /* display: flex; */
    /* margin-left: 14px; */
    margin-right: 20%;
    /* justify-content: center;
    align-content: center;
    text-align: center; */
    margin-top:3%;
  }
  .homepage-about_red > h2{
    /* margin-right: -50px; */
    /* margin-top: 10px; */
    /* display: flex; */
    float: left;

  }
  .homepage-about_right {
    display: flex;
    /* float:left; */
    /* justify-content: right; */
    align-items: flex-end;
  }
  .homepage-about_right > button{
    width: 100px;
    height: 35px;
    /* line-height: 2.5; */
    border-radius: 40px;
    border: 0px;
    border: 1px solid #747171;
    background-color: rgb(64, 158, 255);
  }
  /* .homepage-about_right > button:hover{
    background-color: #fff;
  } */
  .homepage-about_right > button > a{
    color: #fff;
  }
  /* .homepage-about_right > button > a:hover{
    color: #747171;
  } */

  .homepage-about_right > button:hover{
    background-color: #fff;
    border: 1px solid #8f8e8e;
  }
  .homepage-about_right > button:hover .homepage-about_a{
    color: #8f8e8e;
  }
  .homepage-about_right > button > a > span{
    margin-left: 6%;
  }
  .homepage-img{
    width: 100%;
    height: 100%;
    margin-top: 3%;
    display: flex;
    /* float: left; */
    /* background-color: yellow; */
  }
  .homepage-img_video{
    width: 100%;
    height: 100%;
  }
  .homepage-img_video > img{
    width: 100%;
    height: 100%;
  }
  .bg-purple{
    width: 50%;
    /* background-color: green; */
  }
  .bg-porple-light{
    width: 50%;
    height: 86%;
    /* border: 1px solid skyblue; */
    padding-top: 3%;
    margin-left: 1%;
  }
  .homepage-img_picture{
    width: 100%;
    height: 100%;
  }
  .homepage-img_p{
    width: 100%;
    height: 35%;
  }
  .homepage-img_p > div{
    font-size: 1rem;
    line-height: 2;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .homepage-img_foto{
    width: 100%;
    height: 60%;
    /* background-color: red; */
    margin-top: 1%;
  }
  .img_foto{
    width: 100%;
    height: 100%;
  }
  .im_foto-border{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10%;

    /* text-align: center; */
  }
  .box,.box1,.box2,.box3{
    width: 110px;
    height: 125px;
    /* width: 25%;
    height: 100%; */
    /* size: 300px; */
    /* height: 300px; */
    /* background-color: green; */
    /* padding-top: 5%; */
    background-size: cover;
    margin-top: 4%;
    background-repeat:no-repeat;
    text-align: center;
    font-weight: bolder;

  }
  .box:hover{
    transform: scale(1.1);
  }
  .box1:hover{
    transform: scale(1.1);
  }
  .box2:hover{
    transform: scale(1.1);
  }
  .box3:hover{
    transform: scale(1.1);
  }
  .box,.box2,.box3,.box1{
    transition: transform .8s;
  }
  .im_foto-border > a::before{
    content: "";
    display: block;
    height: 125px;

    /* background-size: cover; */
    /* margin-top: 5%; */
  }
  .im_foto-border > a:nth-child(1){
    background-image: url(../assets/about-icon.png) ;
    background-repeat:no-repeat;
    background-position: 0 0;

  }
  .im_foto-border > a:nth-child(2){
    background-image: url(../assets/about-icon.png) ;
    background-position: -110px 0;

  }
  .im_foto-border > a:nth-child(3){
    background-image: url(../assets/about-icon.png) ;
    background-position: -220px 0;

  }
  .im_foto-border > a:nth-child(4){
    background-image: url(../assets/about-icon.png) ;
    background-position: -330px 0;
  }
  /*  */
  @media screen and (max-width: 992px){
    .homepage-about_red::before{
      margin-right: 12px;
      font-size: 12px;
    }
    .homepage-about_right > button{
      width: 70px;
      height: 30px;

    }
    .homepage-img_video{
      width: 100%;
      height: 100%;
      margin-top: 5%;
    }
    .box,.box1,.box2,.box3{
      /* width: 85px;
      height: 120px; */
      width:80px;
      height: 95px;
      /* border: 1px solid yellow; */
    }
    .im_foto-border > a::before{
      content: "";
      display: block;
      height: 95px;
      width: 100%;
      background-size: auto;
      /* background-size: cover; */
      /* margin-top: 5%; */
    }
    .im_foto-border > a:nth-child(1){
      background-image: url(../assets/about-icon.png) ;
      /* background-repeat:no-repeat; */
      background-position: -335px 0;
    }
    .im_foto-border > a:nth-child(2){
      background-image: url(../assets/about-icon.png) ;
      /* background-repeat:no-repeat; */
      background-position: -423px 0;
    }
    .im_foto-border > a:nth-child(3){
      background-image: url(../assets/about-icon.png) ;
      /* background-repeat:no-repeat; */
      background-position: -510px 0;
    }
    .im_foto-border > a:nth-child(4){
      background-image: url(../assets/about-icon.png) ;
      /* background-repeat:no-repeat; */
      background-position: -590px 0;
    }
    .homepage-img{
      display: inline;
    }
    .bg-purple{
      width: 100%;
    }
    .bg-porple-light{
      width: 100%;
    }
    .im_foto-border{
      margin-top: 5%;
      justify-content: space-evenly;
    }
  }
  .img-logo{
    width: 100px;
    height: 100px;
  }
  .menu-right{
    display: inline-block;
    position: absolute;
    right: 0;
  }
  /* 产品展示 */

</style>
